<html lang="Zh_cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>SpeedReader</title>
    <!-- Import style -->
    <link rel="stylesheet" href="/static/css/element-plus@2.3.3.css"/>
    <!--    <link rel="stylesheet" href="https://element-plus.gitee.io/assets/style.3a4e87a2.css">-->
    <!-- Import Vue 3 -->
    <script src="/static/js/vue@3.2.47.js"></script>
    <!-- Import component library -->
    <script src="/static/js/element-plus@2.3.3.js"></script>
    <!-- Import jQuery 3 -->
    <script src="/static/js/jquery-3.6.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/frame.css">
    <!--    bootstrap-->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div id="app" style="height: 100%;width: 100%">
    <div class="common-layout">
        <el-container>
            <el-header style="text-align: right; font-size: 12px; margin-bottom:50px">
                <el-row>
                    <!--                    <el-col :span="4">-->
                    <!--                        <div class="card">-->
                    <!--                            <div class="card-body">-->
                    <!--                                <h5 class="card-title">选择书籍</h5>-->
                    <!--                                <p class="card-text">-->
                    <!--                                    <el-select v-model="filename" @change="datasourcechange">-->
                    <!--                                        <el-option-->
                    <!--                                                v-for="item in files"-->
                    <!--                                                :key="item.name"-->
                    <!--                                                :label="item.name"-->
                    <!--                                                :value="item.name">-->
                    <!--                                        </el-option>-->
                    <!--                                    </el-select>-->
                    <!--                                </p>-->
                    <!--                                <el-upload-->
                    <!--                                        action="/api/fileupload"-->
                    <!--                                        multiple-->
                    <!--                                        :on-success="fileuploadsuccess"-->
                    <!--                                >-->
                    <!--                                    <el-button type="primary" class="btn btn-primary">上传</el-button>-->
                    <!--                                </el-upload>-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <!--                    </el-col>-->
                    <el-col :span="4" :offset="0">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">问答设置</h5>
                                <div class="card-text">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-checkbox v-model="explained" label="启用解释" size="large"></el-checkbox>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-button type="primary" size="small" @click="showmodelpluginconfig=true">
                                                打开插件配置
                                            </el-button>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="6">
                                            <el-text class="mx-1" v-model="retrieval">检索数目：</el-text>
                                        </el-col>
                                        <el-col :span="18">
                                            <el-input-number v-model="num_retrieval"></el-input-number>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="4" :offset="0">
                        <div class="card" style="height: 100%;">
                            <div class="card-body">
                                <h5 class="card-title">问答来源</h5>
                                <p class="card-text">
                                    <el-select v-model="plugincomprehensionername">
                                        <el-option
                                                v-for="item in Object.keys(name2parameters)"
                                                :key="item"
                                                :label="item"
                                                :value="item"
                                                :disabled="name2parameters[item].success=='False'">
                                        </el-option>
                                    </el-select>
                                </p>
                                <el-text>具体模型的特点参考对应的插件。</el-text>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12" :offset="4">
                        <el-menu
                                @select="handleSelect"
                                class="el-menu-demo"
                                mode="horizontal"
                                style="background-color: #a17bc7"
                        >
                            <el-menu-item index="bookedit.html">书籍管理</el-menu-item>
                            <el-menu-item index="pluginmanage.html">书籍插件管理</el-menu-item>
                            <el-menu-item index="comprehensionermanager.html">问答模型插件管理</el-menu-item>
                        </el-menu>
                        <a style="font-family: 'Nunito',sans-serif;font-size: 2rem;color: #000;font-weight: bolder;
                                  text-decoration: none;display:flex;align-items:center;justify-content:center;"
                           href="index.html">简约模式</a>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <!--                <el-input @change="Query" v-model="query">-->
                <!--                    <template #append>-->
                <!--                        <el-button @click="Query">查询</el-button>-->
                <!--                    </template>-->
                <!--                </el-input>-->
                <el-row>
                    <el-input @change="Query" v-model="query">
                        <template #prefix>
                            <el-upload style="display:flex;align-items:center;justify-content:center;"
                                       action="/api/fileupload"
                                       multiple
                                       :on-success="fileuploadsuccess"
                                       v-if="files.length==0"
                            >
                                <el-button>上传书籍
                                    <el-icon>
                                        <Plus/>
                                    </el-icon>
                                </el-button>
                            </el-upload>
                            <el-select v-model="filename" @change="datasourcechange" v-if="files.length>0">
                                <el-option
                                        v-for="item in files"
                                        :key="item.name"
                                        :label="item.name"
                                        :value="item.name">
                                </el-option>
                                <el-upload style="display:flex;align-items:center;justify-content:center;"
                                           action="/api/fileupload"
                                           multiple
                                           :on-success="fileuploadsuccess"
                                >
                                    <el-button>
                                        <el-icon>
                                            <Plus></Plus>
                                        </el-icon>
                                        上传书籍
                                    </el-button>
                                </el-upload>
                            </el-select>
                        </template>
                        <template #append>
                            <el-button @click="Query">查询</el-button>
                        </template>
                    </el-input>
<!--                    <el-button @click="showmodelpluginconfig=true">设置</el-button>-->
                </el-row>
                <el-input
                        resize="none"
                        :readonly="true"
                        :rows="explained? 10: 20"
                        placeholder=""
                        type="textarea"
                        v-model="answer"></el-input>
                <div v-if="explained">
                    <el-carousel trigger="click" style="height: max-content" :autoplay="false">
                        <el-carousel-item style="height: max-content">
                            <div>
                                <div style="width: 100%;text-align: center;">
                                    <el-text>参考解释</el-text>
                                </div>
                                <el-row>
                                    <el-col :span="12">
                                        <div style="width: 100%;text-align: center;">
                                            <el-text>相似度：</el-text>
                                            <el-text>{{explained_res.destence[explained_res.pageid * 2 - 2]}}</el-text>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div style="width: 100%;text-align: center;">
                                            <el-text>相似度：</el-text>
                                            <el-text>{{explained_res.destence[explained_res.pageid * 2 - 1]}}</el-text>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-card body-style="padding:'0px';">
                                            <div style="padding: 14px;overflow:auto;height: 300px;">
                                                <span v-html="explained_res.context[explained_res.pageid * 2 - 2]"></span>
                                            </div>
                                        </el-card>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-card body-style="padding:'0px';">
                                            <div style="padding: 14px;overflow:auto;height: 300px;">
                                                <span v-html="explained_res.context[explained_res.pageid * 2 - 1]"></span>
                                            </div>
                                        </el-card>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12" :offset="6">
                                        <el-pagination v-model:current-page="explained_res.pageid"
                                                       layout="prev, pager, next, jumper"
                                                       :page-count="Math.ceil(explained_res.context.length / 2)"></el-pagination>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-carousel-item>
                        <el-carousel-item v-for="item in explained_res.items" style="height: max-content">
                            <div v-if="item.type=='float'">
                                <el-descriptions :title="item.name">
                                    <el-descriptions-item label="描述">{{item.introduction}}</el-descriptions-item>
                                    <el-descriptions-item label="概率">{{item.value}}</el-descriptions-item>
                                </el-descriptions>
                            </div>
                            <div v-if="item.type=='List[Tuple[str, float]]'">
                                <el-descriptions :title="item.name">
                                    <el-descriptions-item label="描述">{{item.introduction}}</el-descriptions-item>
                                </el-descriptions>
                                <el-row>
                                    <div v-for="val in pro2color_map">
                                        <el-button :style="{'background-color':val[1]}" size="small">p>={{val[0]}}
                                        </el-button>
                                    </div>
                                </el-row>
                                <el-row>
                                    <div v-for="val in item.value">
                                        <span :style="{'background-color':pro2color(val[1], pro2color_map)}">{{val[0]}}</span>
                                    </div>
                                </el-row>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <el-input @change="run" v-model="run_code">
                    <template #append>
                        <el-button @click="run">运行</el-button>
                    </template>
                </el-input>
            </el-main>
            <el-footer style="height: 100%;">
                <div style="width: 100%;height: 85vh">
                    <div style="width: 100%;text-align: center;">
                        <el-text>{{filename}}</el-text>
                    </div>
                    <el-row style="height:100%">
                        <el-col :span="12">
                            <el-card body-style="padding:'0px';">
                                <div style="padding: 14px;overflow:auto;height: 100%;">
                                    <span v-html="pages[pageid * 2 - 2]"></span>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card body-style="padding:'0px';">
                                <div style="padding: 14px;overflow:auto;height: 100%;">
                                    <span v-html="pages[pageid * 2 - 1]"></span>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12" :offset="8">
                            <el-pagination v-model:current-page="pageid"
                                           layout="prev, pager, next, jumper" :page-count="totalpage"></el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </el-footer>
        </el-container>
    </div>

    <el-drawer
            v-model="showmodelpluginconfig"
            title="模型推理自定义参数配置页"
            :before-close="handleClose"
    >
        <div class="card">
            <div class="card-body">
                <div class="card-text">
                    <div v-for="param in name2parameters[plugincomprehensionername].parems">
                        <el-button :title="param.description">{{param.name}}</el-button>
                        <el-input v-model="param.default" v-if="param.annotation=='str'"></el-input>
                        <el-input-number v-model="param.default" v-else-if="param.annotation=='int'"></el-input-number>
                        <el-switch v-model="param.default" v-else-if="param.annotation=='bool'"></el-switch>
                        <p :title="param.description" v-else>不受支持的更改类型({{param.annotation}})：{{param.name}}</p>
                    </div>
                </div>
            </div>
        </div>
    </el-drawer>
</div>
<script type="module">
    const App = {
            data() {
                return {
                    answer: "",
                    query: "什么是马克思主义？？",
                    files: [],
                    plugincomprehensionernames: [],
                    plugincomprehensionername: "",
                    filename: "",
                    explained: false,
                    explained_res: {
                        context: [],
                        destence: [],
                        pageid: 1
                    },
                    showmodelpluginconfig: false,
                    name2parameters: {},
                    num_retrieval: 1,

                    pages: [],
                    pageid: 1,

                    pro2color_map: [
                        [0.8, "#6da7ef"],
                        [0.5, "#79bbff"],
                        [0.3, "#a0cfff"],
                        [0.1, "#c6e2ff"],
                        [0, "#d9ecff"]
                    ],
                    pro2color: function pro2color(pro, pro2color_map) {
                        for (let j = 0; j < pro2color_map.length; j++) {
                            if (pro >= pro2color_map[j][0]) {
                                return pro2color_map[j][1];
                            }
                        }
                    },

                    run_code: ''
                };
            },
            computed: {
                totalpage() {
                    return Math.ceil(this.pages.length / 2)
                }
            },
            methods: {
                run(text) {
                    const that = this;
                    $.get(
                        "/test/run",
                        {
                            code: that.run_code
                        }
                    )
                },
                Query(text) {
                    const that = this;
                    that.answer = "正在查询……"
                    $.ajax(
                        {
                            url: '/api/query',
                            'data': JSON.stringify(
                                {
                                    "bookname": that.filename,
                                    "query": that.query, //可能来自按钮
                                    "plugincomprehensionername": that.plugincomprehensionername,
                                    "explained": that.explained,
                                    "num_retrieval": that.num_retrieval,
                                    "params": that.name2parameters[that.plugincomprehensionername].parems
                                }
                            ),
                            'type': 'POST',
                            'processData': false,
                            'contentType': 'application/json',
                            success: function (data) {
                                that.answer = data.answer
                                if (that.explained) {
                                    that.explained_res = data;
                                    that.explained_res.pageid = 1;
                                    console.log(data)
                                }
                            },
                            error: function (data) {
                                that.answer = data.responseText
                            }
                        }
                    );
                },
                fileuploadsuccess(response, uploadFile, uploadFiles) {
                    if (response.length > 0) {
                        alert(response)
                    }
                    this.files.push({
                        "name": uploadFile.name,
                        "description": ""
                    });
                },
                handleSelect(key, keyPath) {
                    window.open(key)
                },
                datasourcechange(val) {
                    const that = this;
                    $.getJSON(
                        "/api/getfilecontent",
                        {
                            bookname: val
                        },
                        function (data) {
                            that.pages = data.pages
                        }
                    );
                },
            },
            mounted() {
                const that = this;
                $.getJSON(
                    "/api/getbooksfrombooksshelf",
                    null,
                    function (data) {
                        that.files = data.files
                        if (that.files.length > 0) {
                            that.filename = that.files[0].name
                            $.getJSON(
                                "/api/getfilecontent",
                                {
                                    bookname: that.filename
                                },
                                function (data) {
                                    that.pages = data.pages.map(x => x.replace('\n', '<br>'))
                                }
                            );
                        }
                    }
                );
                $.getJSON(
                    "/api/getplugincomprehensionernames",
                    null,
                    function (data) {
                        that.name2parameters = data.name2parameters
                        if (Object.keys(that.name2parameters).length > 0) {
                            that.plugincomprehensionername = Object.keys(that.name2parameters)[0]
                        }
                        console.log(data.name2parameters)
                    }
                );
            }
        }
    ;
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>